<template>
  <div style="background: #fff">
    <div class="title">
      <div>{{ title }}</div>
    </div>
    <div style="padding: 1.875rem">
      <el-form :inline="true">
        <el-form-item label="">
          <el-input
            v-model="query.name"
            placeholder="账户名称"
          ></el-input>
        </el-form-item >
         
        <el-form-item label="选择一级分类" v-if="type==4" >
          <el-select v-model="query.one_id" placeholder="请选择" @change="getQueryTwo" clearable>
            <el-option
              v-for="item in one"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择二级分类"  v-if="type==4">
          <el-select v-model="query.two_id" placeholder="请选择" clearable>
            <el-option
              v-for="item in two"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="选择省"  v-if="type==1">
          <el-select v-model="query.province_id"  placeholder="请选择" @change="getCity" clearable>
            <el-option
              v-for="item in province"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="选择城市"  v-if="type==1">
          <el-select v-model="query.city_id" placeholder="请选择" @change="getArea" clearable>
            
            <el-option
              v-for="item in city"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择区县"  v-if="type==4">
          <el-select v-model="query.area_id" placeholder="请选择" clearable>
            <el-option
              v-for="item in area"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="getData(true)">查询</el-button>
          <el-button @click="reset">重置</el-button>
          <el-button type="primary" @click="showEdit(false)">添加</el-button>
        </el-form-item>
      </el-form>
    </div>
      <!-- <div class="add">
        <el-button type="success" @click="showEdit(false)">添加</el-button>
      </div> -->
      <!-- <el-divider></el-divider> -->
      
    <el-table
      :data="data"
      stripe
      style="margin-bottom: 1.875rem"
    
    >
      </el-table-column>
      <el-table-column prop="id" label="id"></el-table-column>
      <el-table-column prop="name" label="登录账号"></el-table-column>
      <el-table-column prop="phone" label="手机号"></el-table-column>
       <el-table-column prop="password" label="密码"></el-table-column>
       <el-table-column label="一级分类" v-if="type==4">
        <template slot-scope="scope" v-if="scope.row.one" >
          {{scope.row.one.name}}
        </template>
      </el-table-column>

     <el-table-column label="收钱微信openid" v-if="type==4">
        <template slot-scope="scope">
         {{scope.row.openid}}
        </template>
      </el-table-column>
      <el-table-column  label="店员身份" v-if="type==5">
        <template slot-scope="scope">
          {{['普通店员','店长'][scope.row.is_master-1]}}
        </template>
      </el-table-column>
      <el-table-column label="二级分类" v-if="type==4">
        <template slot-scope="scope" v-if="scope.row.two">
         {{scope.row.two.name}}
        </template>
      </el-table-column>
       <el-table-column  label="省" v-if="type!=5">
        <template slot-scope="scope" v-if="scope.row.province">
          {{scope.row.province.name}}
        </template>
      </el-table-column>
       <el-table-column  label="城市" v-if="type!=5">
        <template slot-scope="scope" v-if="scope.row.city">
          {{scope.row.city.name}}
        </template>
      </el-table-column>
       <el-table-column prop="area_list" label="区县"  v-if="type==1||type==2||type==3"></el-table-column>
      <el-table-column  label="区县" v-if="type==4">
        <template slot-scope="scope" v-if="scope.row.area">
          {{scope.row.area.name}}
        </template>
      </el-table-column>
      <el-table-column prop="date"  label="入驻时间" v-if="type!=5"></el-table-column>
        <el-table-column prop="company" label="公司" v-if="type==1"></el-table-column>
          <el-table-column prop="bond_price" label="基本金" v-if="type==2"></el-table-column>
          <el-table-column prop="real_name" label="负责人姓名"></el-table-column>
           <!-- <el-table-column prop="current_price" label="上月工资" v-if="type==3"></el-table-column> -->
       <el-table-column label="操作" width="300">
        <template slot-scope="scope">
           <!-- <el-button size="small" @click="pay(scope.row)" v-if="type==3">派发工资</el-button> -->
          <el-button size="small" @click="showEdit(scope.row)">编辑</el-button>
          <el-button type="error" size="small" @click="del(scope.row)">删除</el-button>
           <el-button type="success" size="small" @click="login(scope.row)" v-if="type==1">一键登录</el-button>
        </template>
      </el-table-column>
     
    </el-table>
     <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pages.currentPage"
     
      :page-size="pages.per_page"
      layout="total,prev, pager, next"
      :total="pages.total"
      style="text-align: center"
    >
    </el-pagination>
    
    <el-dialog title="编辑" :visible.sync="editModal" width="40%" :close-on-click-modal='false'>
        <el-form :model="item">
          <el-form-item label="登录账户">
            <el-input v-model="item.name" autocomplete="off"></el-input>
          </el-form-item>
            <!-- <el-form-item label="手机号">
            <el-input v-model="item.phone" autocomplete="off"></el-input>
          </el-form-item> -->
          <el-form-item label="密码">
            <el-input v-model="item.password" autocomplete="off"></el-input>
          </el-form-item>
           <el-form-item label="店员类型"  v-if="type==5">
          <el-radio v-model="item.is_master" :label="1">普通店员</el-radio>
          <el-radio v-model="item.is_master" :label="2">店长</el-radio>
        </el-form-item>
        <el-form-item label="选择省"  v-if="type==1">
          <el-select v-model="item.province_id" placeholder="请选择" @change="getItemCity" clearable>
            
            <el-option
              v-for="item in province"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
             <el-form-item label="选择城市"  v-if="type==1">
          <el-select v-model="item.city_id" placeholder="请选择" @change="getItemArea(true)" clearable>
            
            <el-option
              v-for="item in city"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
       <el-form-item label="基本金" v-if="type==2">
            <el-input v-model="item.bond_price" autocomplete="off"></el-input>
          </el-form-item>
         <el-form-item label="区县" v-if="type==1||type==2||type==3">
           <el-checkbox-group v-model="item.select_area" >
              <el-checkbox v-for="item in area" :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item label="方案" v-if="type==2">
          <el-select v-model="item.plan_id" placeholder="选择"  :disabled="item.id">
            <el-option
              v-for="item in plan"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
       
<!-- 
        <el-form-item label="提成方式" v-if="type==3">
          <el-select v-model="item.salary_id" placeholder="选择"  :disabled="item.id">
            <el-option
              v-for="item in salary"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item> -->


          <el-form-item label="区县"  v-if="type==4">
          <el-select v-model="item.area_id" placeholder="选择"> 
            <el-option
              v-for="item in area"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              
            ></el-option>
          </el-select>
        </el-form-item>
          <el-form-item label="基本金" v-if="type==2">
            <el-input v-model="item.bond_price" autocomplete="off"></el-input>
          </el-form-item>
         <el-form-item label="收钱微信openid" v-if="type==4">
            <el-input v-model="item.openid" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="地址" v-if="type==4">
            <el-input v-model="item.address" autocomplete="off"></el-input>
          </el-form-item>
            <el-form-item label="经度" v-if="type==4">
            <el-input v-model="item.lon" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="纬度" v-if="type==4">
            <el-input v-model="item.lat" autocomplete="off"></el-input>
          </el-form-item>
          
         
           <el-form-item label="一级分类" v-if="type==4">
          <el-select v-model="item.one_id" placeholder="选择" @change="setItemOne">
            <el-option
              v-for="item in one"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类"  v-if="type==4">
          <el-select v-model="item.two_id" placeholder="选择">
            <el-option
              v-for="item in two"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        
        <el-form-item label="营业执照" v-if="type==4">
          <div style="display: flex">
            <div
              class="demo-upload-list"
              v-for="(item, index) in [item.license]"
              :key="index"
            >
              <template>
                <img
                  :src="
                    cdn +
                    item +
                    '?imageView2/1/w/100/h/100/format/webp/q/75|imageslim'
                  "
                />
                <div class="demo-upload-list-cover">
                  <i
                    class="el-icon-view icon"
                    @click="preview(item, index, false)"
                  ></i>
                </div>
              </template>
            </div>

            <el-upload
              class="avatar-uploader"
              action="http://upload.qiniup.com"
              :show-file-list="false"
              :on-success="uploadLicense"
              :data="qnToken"
            >
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
          格式为jpg png
        </el-form-item>

        <el-form-item label="资质" v-if="type==4">
          <div style="display: flex">
            <div
              class="demo-upload-list"
              v-for="(item, index) in item.certificate"
              :key="index"
            >
              <template>
                <img
                  :src="
                    cdn +
                    item +
                    '?imageView2/1/w/100/h/100/format/webp/q/75|imageslim'
                  "
                />
                <div class="demo-upload-list-cover">
                  <i
                    class="el-icon-view icon"
                    @click="preview(item, index, true)"
                  ></i>
                  <i class="el-icon-delete icon" @click="remove(index)"></i>
                </div>
              </template>
            </div>

            <el-upload
              class="avatar-uploader"
              action="http://upload.qiniup.com"
              :show-file-list="false"
              :multiple="true"
              :on-success="uploadCertificate"
              :data="qnToken"
            >
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
          最多支持上传9张
        </el-form-item>
           <el-form-item label="公司" v-if="type==1">
            <el-input v-model="item.company" autocomplete="off"></el-input>
          </el-form-item>
          
         
          <el-form-item label="负责人姓名">
            <el-input v-model="item.real_name" autocomplete="off"></el-input>
          </el-form-item>
           <!-- <el-form-item label="银行卡号">
            <el-input v-model="item.bank_code" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="开户行">
            <el-input v-model="item.bank_name" autocomplete="off"></el-input>
          </el-form-item> -->
          
          
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editModal = false">取 消</el-button>
          <el-button type="primary" @click="edit">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="预览" :visible.sync="previewModal" center>
      <!-- <img :src="cdn+img" alt=""> -->
      <el-image :src="cdn + img" lazy></el-image>
      
    </el-dialog>
  
  </div>
</template>

<script>
import mixin from "../../js/mixin";

export default {
  name: "homePage",
  mixins: [mixin],
  data() {
    return {
      is_page: true,
      api_url: "account",
      item: {},
      status: [],
      area_list: [],
      plan: [],
      salary: [
        { id: 1, name: "方式一" },
        { id: 2, name: "方式二" },
        { id: 3, name: "方式三" },
      ],
      query: {
        one_id: "",
        two_id: "",
      },
    };
  },
  components: {},
  mounted() {
    this.refreshPage();
  },
  created() {
    this.type = localStorage.getItem("admin_type");
    let id = this.$route.query.id;
    if (this.type == 1) {
      this.title = "代理商列表";
    }
    if (this.type == 2) {
      this.title = "城市合伙人列表";
    }
    if (this.type == 3) {
      this.title = "业务经理列表";
    }
    if (this.type == 4) {
      this.title = "商家列表";
    }
    if (this.type == 5) {
      this.title = "店员列表";
    }

    this.init();
  },
  methods: {
    login(e) {
      let that = this;
      that.item = e;
      this.$confirm("确定登陆吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          that.global.httpRequest("login", that.item, "post").then((res) => {
            if (res.code == 0) {
              let data = res.data;
              let type = data.type;
              localStorage.setItem("token", data.token);
              localStorage.setItem("name", data.name);
              localStorage.setItem("admin_type", type);
              localStorage.setItem("refresh", "");

              that.$router.push({ path: "/redirect" });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    showEdit(e) {
      if (e) {
        this.item = { id: e.id };
        this.getItem();
      } else {
        this.item = {
          province_id:this.query.province_id,
          city_id: this.query.city_id,
          area_id: this.query.area_id,
          one_id: "",
          two_id: "",
          license: "",
          certificate: [],
          select_area: [],
        };
      }
      this.editModal = true;
    },

    getItem() {
      this.global.httpRequest(this.api_url, this.item).then((res) => {
        this.item = res;
        if (this.item.one_id) {
          this.getItemTwo();
        }
        if (this.item.province_id) {
          if (this.type == 1) {
            this.getItemCity();
          }
        }
        if (this.item.city_id) {
          if (this.type == 1) {
            this.getItemArea();
          }
        }
      });
    },

    getCate() {
      this.global.httpRequest("shop/cate", { p_id: 0 }).then((res) => {
        this.one = res;
      });
    },

    getPlan() {
      this.global.httpRequest("plan", { p_id: 0 }).then((res) => {
        this.plan = res;
      });
    },

    pay(e) {
      this.$message({
        type: "error",
        message: "即将开放",
      });
    },

    reset() {
      this.query = {
        one_id: "",
        two_id: "",
        province_id:"",
        city_id: "",
        area_id: "",
      };
      this.getData(true);
    },
    init() {
      this.getData();
      this.getCate();

      if (this.type == 1) {
        this.getProvince();
      }
      if (this.type == 2) {
        this.getPlan();
      }
      if (this.type == 2 || this.type == 3 || this.type == 4) {
        this.getItemArea();
      }

      if (this.type == 4) {
        this.getQnToken();
      }
    },
  },
};
</script>

<style scoped>
</style>
